<template>
  <div class="overflow-scroll">
    <div class="upload f-a-c">
      <div class="uploadleft">
        <div>
          <el-carousel
            indicator-position="none"
            :arrow="never"
            trigger="click"
            height="700px"
            :autoplay="false"
            :initial-index="current"
            ref="carousel"
            @change="zoumachange"
          >
            <div class="nolist f-j-a-c" v-show="!list.length">
              <upload
                class="upload-demo f-j-a-c"
                ref="uploadRef"
                @sucess="uploadsucess"
                @fileQueued="fileQueued"
                @progressChange="progressChange"
                :limit="6 - list.length"
                :checkReturn="checkReturn"
                fileName="UploadPictureModel"
                :returnFile="true"
              >
                <div class="nolistcnetnt f-j-a-c f-d-c">
                  <svg-icon
                    name="langshangchuang"
                    class="shangchuang"
                  ></svg-icon>
                  <div class="f-d-c nolistcnetnt_item f-j-a-c">
                    <span>拖放或点击上传你的图片</span>
                    <span
                      >建议：使用小于10MB的高质量JPEG、PNG、BMP、TGA文件
                      （最多上传6张）</span
                    >
                  </div>
                </div>
              </upload>
            </div>
            <el-carousel-item v-for="(items, indexs) in list" :key="indexs">
              <div class="detaillist f-j-a-c">
                <img class="imgs" :src="items.url" alt="" />
                <div class="buttons f-a-c f-j-a-c">
                  <upload
                    class="upload-demo f-j-a-c"
                    ref="uploadRef"
                    @sucess="uploadsucess"
                    @progressChange="progressChange"
                    @fileQueued="fileQueued"
                    :checkReturn="checkReturn"
                    :limit="6 - list.length"
                    fileName="UploadPictureModel"
                    :returnFile="true"
                  >
                    <div class="button_items f-j-a-c click">
                      <span class="upimg">上传</span>
                      <svg-icon name="icon-sc" class="upsvg"></svg-icon>
                    </div>
                  </upload>
                </div>
                <div class="button f-a-c">
                  <div
                    class="button_item f-j-a-c click"
                    v-for="(item, index) in anniu"
                    :key="index"
                    @click="annuiClick(indexs, index, items)"
                  >
                    <span class="upimg">{{ item.text }}</span>
                    <svg-icon :name="item.svg" class="upsvg"></svg-icon>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="imgList f-a-c" id="tuozhuai">
          <div
            class="imgBox"
            v-for="(item, index) in imgList"
            :key="index"
            @click="imgLissClick(item, index)"
          >
            <img v-if="item.url" :src="item.url" alt="" />
            <el-progress
              v-if="percentageCheck && percentageCurrent == index"
              class="progress"
              :width="50"
              type="circle"
              :percentage="percentage"
            ></el-progress>
          </div>
        </div>
      </div>
      <div class="uploadright">
        <div class="useleft f-a-c f-j-sb-a-c" style="padding-right: 30px">
          <div class="useleft f-a-c">
            <!-- <img :src="userInfo.avatar || ''" alt="" /> -->

            <userAvatar
              :userImgs="minUserInfo.user_avatar"
              :showDv="userInfo.staus == 1"
            ></userAvatar>

            <div class="userinfos f-d-c">
              <span>{{ minUserInfo.user_name }}</span>
              <div class="f-a-c"></div>
            </div>
          </div>
        </div>

        <div class="title">
          <input
            type="text"
            placeholder="添加标题"
            v-model="formData.title"
            maxlength="30"
          />
        </div>
        <div class="piturnInput">
          <textarea
            name=""
            id=""
            cols="30"
            rows="10"
            placeholder="简单描述你的图片"
            v-model="formData.detail"
            maxlength="100"
          ></textarea>
        </div>
        <div class="f-a-c fennew">
          <div class="fenlei f-d-c">
            <div
              class="fenleixuanze f-a-c f-j-sb-a-c click"
              @click="openfenlei(item, index)"
              style="width: 179px"
            >
              <span>{{ fenletitle }}</span>
              <svg-icon name="icon-zk"></svg-icon>
            </div>
            <Advancedsearch
              @successChoose="successChoose"
              :dropdown1="dropdown1"
            ></Advancedsearch>

            <!-- <div class="fenleibox" v-if="dropdown1">
            <div
              class="fenitem f-a-c click"
              v-for="(item, idnex) in classification"
              :key="idnex"
              @click="classificationCLick(item, index)"
            >
              <span>{{ item.text }}</span>
            </div>
          </div> -->
          </div>
          <div class="fenlei f-d-c" style="margin-left: 10px">
            <div
              class="fenleixuanze f-a-c f-j-sb-a-c click"
              @click="softwareCLick(item, index)"
            >
              <span>{{ ruanjiantitle }}</span>
              <svg-icon name="icon-zk"></svg-icon>
            </div>
            <div class="fenleibox" v-if="dropdown2">
              <div
                class="fenitem f-a-c click"
                v-for="(item, idnex) in software"
                :key="idnex"
                @click="softwarebutton(item, index)"
              >
                <span>{{ item.text }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="piturnInput">
          <textarea
            name=""
            id=""
            cols="30"
            rows="10"
            v-if="list[lunboindex] && tishiciCurrent == -1"
            v-model="list[lunboindex].text"
            placeholder="未识别出提示词，请手动输入,输入反义请填写 Negative prompt:"
          ></textarea>
          <textarea
            v-else
            name=""
            id=""
            v-model="Cueword"
            Cueword
            cols="30"
            rows="10"
            placeholder="未识别出提示词，请手动输入,输入反义请填写 Negative prompt:"
          ></textarea>
        </div>
        <div>
          <el-checkbox
            v-model="checked1"
            label="提示词适用于本组照片"
            size="large"
            @input="inputnowpicture"
          />
        </div>
        <div class="biaoqing">
          <input
            type="text "
            v-model="keyinput"
            @keyup.enter="handleEnterKey"
            placeholder="添加标签（回车添加标签）"
          />
        </div>
        <div class="biaoqingboax f-a-c">
          <div
            class="biaoitem f-j-a-c"
            v-for="(item, index) in keypreedList"
            :key="index"
          >
            <span>{{ item.key }}</span>
            <svg-icon name="sc" class="sc click" @click="del(index)"></svg-icon>
          </div>
        </div>
        <div class="biaoshi">
          <div class="f-a-c biaoshiitem">
            <div class="mb-2 flex items-center text-sm">
              <el-radio-group v-model="radio1" class="ml-4">
                <el-radio label="1" size="large">原创</el-radio>
                <el-radio label="2" size="large">转载</el-radio>
              </el-radio-group>
            </div>
            <input
              style="width: 125px"
              v-if="radio1 == 2"
              type="text"
              placeholder="请输入原模型链接.."
              v-model="molink"
            />
          </div>
          <div class="f-a-c biaoshiitem">
            <div class="mb-2 flex items-center text-sm">
              <el-radio-group v-model="radio11" class="ml-4" disabled>
                <el-radio label="1" size="large">免费</el-radio>
                <el-radio label="2" size="large">收费</el-radio>
              </el-radio-group>
            </div>
            <input
              v-if="radio11 == 2"
              type="number"
              placeholder="输入价格..."
              v-model="price"
            />
            <svg-icon name="alert-circle" class="alert-circle click"></svg-icon>
          </div>
        </div>
        <div class="f-a-c fennew" v-if="ruanjiantitle == 'Stable Diffusion'">
          <div class="fenlei f-d-c">
            <div
              class="fenleixuanze f-a-c f-j-sb-a-c click"
              @click="moxingboxopen()"
            >
              <input
                type="text"
                class="inputmoxing"
                placeholder="搜索模型"
                v-model="moxingName"
                @input="moxingNameClick"
              />
              <!-- <span>{{ choosemo }}</span> -->
              <svg-icon name="icon-zk"></svg-icon>
            </div>
            <div class="fenleibox" v-if="dropdown3">
              <div
                class="fenitem f-a-c click"
                v-for="(item, idnex) in moxingbox"
                :key="idnex"
                @click="moxingboxClick(item, index)"
              >
                <span>{{ item.text }}</span>
              </div>
            </div>
          </div>
          <!-- <span class="noshibai">未识别到模型请手动选择</span> -->
        </div>

        <div class="biaoqingboax f-a-c">
          <div
            class="biaoitem moxingclorl f-j-a-c"
            v-for="(item, index) in moxingList"
            :key="index"
            style="background: #f7f9fa"
          >
            <span style="color: #64cbe5">{{ item.text }}</span>
            <svg-icon
              name="sc"
              class="sc click"
              @click="delmoxing(index)"
            ></svg-icon>
          </div>
        </div>
        <div>
          <el-checkbox
            v-model="nouser"
            label="允许他人商用此图片"
            size="large"
          />
        </div>
        <div class="f-a-c">
          <el-checkbox v-model="yuedu" label="我已阅读并同意" size="large" />
          <span
            class="click"
            style="font-size: 14px; color: #656f79"
            @click="openw"
            >《用户协议》</span
          >
        </div>

        <div class="fabu f-j-a-c click" @click="release">
          <span>发布</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Advancedsearch from "@/components/Advancedsearch.vue";
import upload from "@/components/upload.vue";
import userAvatar from "@/components/userAvatar.vue";

import { showLoading, hideLoading } from "@/utils/loading.js";

import {
  putFile,
  addpicture,
  download,
  checfile,
  add,
  searchmodel,
  getfy,
} from "@/axios/api.js";
let classification = [];
let software = [];
import { ElMessage } from "element-plus";
import Sortable from "sortablejs";
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  ref,
  nextTick,
  watch,
} from "vue";
var reader = new FileReader();

import { useStore } from "vuex";
export default defineComponent({
  components: {
    upload,
    Advancedsearch,
    userAvatar,
  },
  props: {
    uploadVisbile: {
      type: Boolean,
      default: false,
    },
  },
  setup() {
    let minUserInfo = computed(() => {
      return store.state.minUserInfo;
    });
    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });
    let moduleID = computed(() => {
      return store.state.moduleID;
    });
    const carousel = ref(null);
    const uploadRef = ref(null);
    const myParagraph = ref(null);
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      never: "never",
      advanceditemlistCheck: false,
      moxingName: "",
      price: "",
      formData: {
        title: "",
        detail: "",
      },
      uploadProgresscheck: false,
      fileList: [],
      moxingList: [],
      moxingbox: [],
      dropdown3: false,
      choosemo: "选择模型",
      keypreedList: [],
      keyinput: "",
      checked1: "",
      nouser: "",
      yuedu: "",
      ruanjiantitle: "选择软件",
      fenletitle: "选择分类",
      software: [],
      dropdown1: false,
      dropdown2: false,
      classification: [],
      current: 0,
      imgList: [],
      anniu: [
        // {
        //   svg: "icon-sc",
        // },
        {
          text: "主图",
          svg: "icon-zhutu",
        },
        {
          text: "删除",

          svg: "icon-shanchu",
        },
      ],
      list: [],
      timerId: "",
      Cueword: "", //所有提示词默认了
      radio1: "",
      radio11: "",
      molink: "", //
      numindex: 0,
      percentage: 0,
      time: "",
      percentageCheck: false,
      percentageCurrent: -1,
      lunboindex: 0, //轮播图id
      tishiciCurrent: -1,
      newlist: [],
      checkReturn: false,
      fenleiType: 0,
      runajianType: null,
      arrdata: [],
      categoryId: [], // 分类id
      imguploadCheck: false,
    });
    onMounted(() => {
      data.classification = classification;
      data.software = software;
      //   data.imgList = data.list;
      if (data.imgList.length < 6) {
        let dataimg = {};
        dataimg.url = "";
        let numType = 6 - data.imgList.length;
        for (let i = 0; i < numType; i++) {
          data.imgList.push(dataimg);
        }
      }
      console.log(data.list, "123123123");
      moxingNameClick();
      console.log(moduleID.value);
      if (moduleID.value != 0) {
        data.moxingName = moduleID.value;
        moxingNameClick();
        data.runajianType = 0;
        data.ruanjiantitle = "Stable Diffusion";
        let dataitem = {
          text: moduleID.value,
        };
        moxingboxClick(dataitem);
      }
      // 读取图像文件
    });

    // 监听
    watch(
      () => data.list,
      (newVal, oldVal) => {
        // 最大
        if (newVal.length >= 6) {
          data.checkReturn = true;
        } else {
          data.checkReturn = false;
        }
      },
      { deep: true }
    );
    // 翻译
    let getfynow = (value) => {
      return new Promise((resolve, reject) => {
        getfy({ code: value, sourceLanguage: "en", targetLanguage: "zh" }).then(
          (res) => {
            let fanyivale = JSON.parse(res.data).Data.Translated;
            resolve(fanyivale);
          }
        );
      });
    };
    let fileQueued = () => {
      if (data.checkReturn) {
        hideLoading();
        return ElMessage.error("上传图片数量最大为6张");
      }

      showLoading();
      // if (data.list.length > 6) {
      //   data.checkReturn = true;
      //   return ElMessage.error("上传图片数量最大为6张");
      // }
      data.percentageCurrent++;
      // data.time = setInterval(() => {
      //   data.percentage += 10;
      //   if (data.percentage == 90) {
      //     clearInterval(data.time);
      //     data.percentage = 99;
      //   }
      // }, 1000);
    };
    let progressChange = (val) => {
      data.percentageCheck = true;
      data.percentage = val;
    };
    let uploadsucess = (value) => {
      console.log(value, "valuevaluevaluevalue");
      // clearInterval(data.time);
      data.percentage = 0;
      data.percentageCheck = false;
      data.list.unshift(value);
      data.imgList.splice(data.numindex, 1);
      data.imgList.unshift(value);
      if (data.numindex == 5) {
        data.numindex = 5;
      }
      data.numindex++;
      data.never = "hover";
      hideLoading();
    };
    let roaiochange = () => {
      console.log(data.radio);
      data.radio = !data.radio;
    };
    // 删除
    let del = (index) => {
      data.keypreedList.splice(index, 1);
    };
    let delmoxing = (index) => {
      data.moxingList.splice(index, 1);
    };
    // 走马灯左右按钮
    let zoumachange = (e) => {
      data.lunboindex = e;
    };
    // 拖拽
    let onmousedowns = () => {};
    let mouseups = () => {
      clearInterval(data.timerId);
    };
    //点击小图切换大图
    let imgLissClick = (item, index) => {
      data.lunboindex = index;
      if (item.url) {
        carousel._value.setActiveItem(index);
      }
    };

    // 软件打开
    let softwareCLick = (item, index) => {
      data.dropdown2 = !data.dropdown2;
      data.dropdown1 = false;
    };
    // 分类打开
    let openfenlei = () => {
      data.dropdown1 = !data.dropdown1;
      data.dropdown2 = false;
    };
    //按钮
    let annuiClick = (indexs, index, items) => {
      //删除
      console.log(index);
      if (index == 1) {
        data.list.splice(indexs, 1);
        // 将第二个对象插入到数组的末尾
        if (data.numindex == 0) {
          data.numindex = 0;
        }
        data.numindex--;
        data.imgList.splice(indexs, 1);
        let datas = {};
        datas.img = "";
        data.imgList.push(datas);
        console.log(data.imgList);
      } else if (index == 0) {
        let objectToMove = items;
        data.list.splice(indexs, 1);
        data.list.unshift(objectToMove);
        data.imgList.splice(indexs, 1);
        data.imgList.unshift(objectToMove);
        carousel._value.setActiveItem(0);
      } else {
        console.log("手动上传", uploadRef.value);
      }
    };
    let classificationCLick = (item, index) => {
      data.fenleiType = item.type;
      data.fenletitle = item.text;
      data.dropdown1 = false;
    };
    let softwarebutton = (item, index) => {
      // if(item.value == 0 ){
      //   if(moduleID.value != 0){

      //     data.moxingName = moduleID.value
      //     moxingNameClick()
      //   }
      // }
      data.runajianType = item.value;
      data.ruanjiantitle = item.text;
      data.dropdown2 = false;
    };
    // 英文正则
    let CheckEn = (values) => {
      let regEmail = new RegExp(
        /^([\u4e00-\u9fa5]{0,6}|[a-zA-Z]{0,15}|[\s\S]{0,15})$/
      );
      return regEmail.test(values);
    };
    let successChoose = (value) => {
      let result = "";

      data.dropdown1 = false;
      data.arrdata = value;
      data.arrdata.forEach((item, index) => {
        data.categoryId.push(item.types);
        // data.categoryId.push(item.id);
      });
      console.log(value);
      data.fenletitle = data.arrdata[0].name;
    };

    //监听回车
    let handleEnterKey = async () => {
      // 在这里添加回车键被按下后的处理代码
      if (!data.keyinput) {
        return ElMessage.error("请输入标签");
      }
      if (data.keypreedList.length >= 10) {
        return ElMessage.error("超过最大标签值");
      }
      // let enType = await CheckEn(data.keyinput);
      // if (!enType) {
      //   return ElMessage.error("中文字符最大不超过6个，英文最大不超过15个字符");
      // }
      let datas = {};
      datas.key = data.keyinput;
      data.keyinput = "";
      data.keypreedList.push(datas);
    };
    let moxingboxopen = () => {
      data.dropdown3 = !data.dropdown3;
    };
    let moxingboxClick = (item, index) => {
      data.dropdown3 = false;
      data.moxingName = "";
      let type = data.moxingList.findIndex((items) => {
        return items.text == item.text;
      });
      if (type == -1) {
        data.moxingList.push(item);
      } else {
        return ElMessage.error("请勿添加重复的模型");
      }
    };
    let uploadchange = () => {
      console.log(uploadRef._value);
      uploadRef._value.clearFiles();
    };

    // 搜索模型
    let moxingNameClick = () => {
      searchmodel({
        title: data.moxingName,
      }).then((res) => {
        console.log(res);
        if (res.data) {
          // data.dropdown3 = true;
          data.moxingbox = [];
          res.data.forEach((item, index) => {
            let datas = {};
            datas.text = item.title;
            datas.id = item.id;
            data.moxingbox.push(datas);
          });
        }
      });
    };

    // 文件贴图上传
    let uploadChartlet = async (e) => {
      console.log(e);
    };
    let hasNumber = (value) => {
      return /\d/.test(value);
    };
    // 发布
    let release = async () => {
      if (data.formData.title == "") {
        return ElMessage.error("请输入标题");
      }
      if (!hasNumber(data.runajianType)) {
        return ElMessage.error("请选择软件");
      }
      if (!data.categoryId) {
        return ElMessage.error("请选择分类");
      }
      if (!data.keypreedList.length) {
        return ElMessage.error("请选择标签");
      }
      if (data.radio1 == "") {
        return ElMessage.error("请选择是否是原创");
      }
      if (data.radio1 == 2 && data.molink == "") {
        return ElMessage.error("请输入模型链接");
      }
      if (data.yuedu != true) {
        return ElMessage.error("请勾选用户协议");
      }

      // if (data.radio11 == "") {
      //   return ElMessage.error("请选择是否收费");
      // }
      // if (data.radio11 == "" && data.price == "") {
      //   return ElMessage.error("请输入收费金额");
      // }

      let labels = "";
      for (let i = 0; i < data.keypreedList.length; i++) {
        labels += data.keypreedList[i].key;
        if (i !== data.keypreedList.length - 1) {
          labels += ", "; // 添加逗号和空格
        }
      }
      let newdatalist = [];

      for (let item of data.list) {
        let protdata = {};
        protdata.type = 0;
        protdata.url = item.url;
        if (!data.checked1 || data.checked1 == false) {
          protdata.prompt = item.text;
        } else {
          protdata.prompt = data.Cueword;
        }

        protdata.zhPrompt = await getfynow(protdata.prompt);
        // console.log(protdata.zhPrompt);
        newdatalist.push(protdata);
      }
      if (!data.list.length) {
        return ElMessage.error("请上传图片");
      }
      let moxinid = [];
      data.moxingList.forEach((item, index) => {
        moxinid.push(item.id);
      });
      let newlistdata = [];
      let listdata = {};
      listdata.type = 0;
      listdata.title = data.formData.title;
      listdata.detail = data.formData.detail;
      listdata.detail = data.formData.detail;

      listdata.types = data.arrdata[0].types;
      listdata.source = data.runajianType;
      listdata.labels = labels;
      listdata.isFree = 0;
      listdata.isOriginal = data.radio1 == 1 ? 0 : 1;
      listdata.data = newdatalist;
      listdata.price = data.price;
      listdata.orUrl = data.molink;
      listdata.isCommercial = data.nouser == true ? 0 : 1;
      listdata.modelId = JSON.stringify(moxinid);
      listdata.categoryId = data.categoryId;
      newlistdata.push(listdata);
      addpicture(newlistdata).then((res) => {
        ElMessage.success("上传成功");
        setTimeout(() => {
          router.back();
        }, 1000);
      });
      // fenletitle 分类
      //ruanjiantitle 软件
      // keypreedList 标签数组
      // radio1 原创 转载
      // radio11 收费 免费
      //price 价格
      //moxingList模型数组
      //      nouser:'', //不允许他人使用
      // yuedu:'',//以阅读
      console.log(data.radio1);
    };
    let inputnowpicture = () => {
      if (data.checked1 == false) {
        if (!data.list[data.lunboindex]) {
          data.checked1 = "";
          return ElMessage.error("请先上传图片");
        } else {
          data.tishiciCurrent = data.list[data.lunboindex];
          data.Cueword = data.list[data.lunboindex].text;
        }
      } else {
        data.Cueword = "";
        data.tishiciCurrent = -1;
      }
    };
    let openw = () => {
      window.open("http://i-desai.com/User_protocol.pdf", "_blank");
    };
    onUnmounted(() => {});
    return {
      minUserInfo,
      getfynow,
      moduleID,
      successChoose,
      userInfo,
      openw,
      progressChange,
      zoumachange,
      inputnowpicture,
      fileQueued,
      uploadsucess,
      moxingNameClick,
      addpicture,
      release,
      myParagraph,
      uploadChartlet,
      uploadchange,
      uploadRef,
      delmoxing,
      moxingboxopen,
      moxingboxClick,
      del,
      handleEnterKey,
      roaiochange,
      classificationCLick,
      softwarebutton,
      openfenlei,
      softwareCLick,
      mouseups,
      onmousedowns,
      annuiClick,
      carousel,
      imgLissClick,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>

.overflow-scroll {
  height: 100%;
}

.fabu {
  width: 100px;
  height: 40px;
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  margin-top: 20px;
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #ffffff;
  }
}
::v-deep .el-upload.is-drag {
  width: 100%;
  height: 100%;
}
::v-deep .el-upload-dragger {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 100%;
  border: 1px solid #ececec !important;
  background: #f7f9fa;
  border-radius: 20px !important;
}
.nolist {
  width: 480px;
  height: 700px;
  border-radius: 20px 20px 20px 20px;
  opacity: 1;

  .nolistcnetnt {
    .shangchuang {
      width: 40px;
      height: 40px;
    }
    .nolistcnetnt_item {
      > span {
        margin-top: 10px;

        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
        &:nth-child(2) {
          display: block;
          width: 385px;
        }
        &:first-child {
          margin-top: 20px;
          font-size: 20px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: 700;
          color: #64c8dc;
        }
      }
    }
  }
  .upload-demo {
    border-radius: 20px 20px 20px 20px;
    background: #f7f9fa;
    width: 480px;
    height: 700px;
  }
}
.imgList {
  position: relative;
  margin-top: 10px;
  .imgBox {
    position: relative;
    cursor: pointer;
    margin-right: 12px;
    width: 70px;

    background: #f7f9fa;
    height: 70px;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    border: 1px solid #ececec;
    > img {
      border-radius: 10px 10px 10px 10px;

      width: 70px;
      height: 70px;
      object-fit: cover;
    }
    .progress {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
  }
}
.upload {
  align-items: flex-start;
  width: 1000px;
  margin: 0 auto;
  height: 100%;
  padding: 30px 0 60px;
  .uploadleft {
    width: 50%;
    height: 700px;
    .detaillist {
      position: relative;
      width: 100%;
      height: 100%;
      > img {
        width: 100%;
        border-radius: 20px;
        height: 100%;
        object-fit: contain;
      }
      .button {
        position: absolute;
        bottom: 15px;
        right: 23px;
        .button_item {
          margin-left: 10px;
          width: 36px;
          height: 36px;
          background: rgba(0, 0, 0, 0.5);
          opacity: 1;
          border-radius: 50%;
          .upsvg {
            display: block;
          }
          .upimg {
            display: none;
            font-size: 3px;
            color: #fff;
          }
          &:hover {
            .upsvg {
              display: none;
            }
            .upimg {
              display: block;
            }
          }
        }
      }
      .buttons {
        position: absolute;
        bottom: 15px;
        right: 116px;
        .button_items {
          // margin-left: 10px;
          width: 36px;
          height: 36px;
          background: rgba(0, 0, 0, 0.5);
          opacity: 1;
          border-radius: 50%;
          .upsvg {
            display: block;
          }
          .upimg {
            display: none;
            font-size: 3px;
            color: #fff;
          }
          &:hover {
            .upsvg {
              display: none;
            }
            .upimg {
              display: block;
            }
          }
        }
      }
    }
  }
  .uploadright {
    margin-left: 20px;
    width: 50%;
    .useleft {
      > img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
      }
      .userinfos {
        margin-left: 10px;
        > span {
          display: block;
          margin-bottom: 5px;
          font-size: 14px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: 700;
          color: #000000;
        }
        .xiazai {
          > img {
            cursor: pointer;
            width: 13px;
          }
          > span {
            margin-left: 3px;
            font-size: 12px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #656f79;
          }
          &:last-child {
            margin-left: 10px;
          }
        }
      }
    }

    .title {
      margin-top: 20px;
      width: 460px;
      height: 46px;
      opacity: 1;
      > input {
        padding-left: 20px;
        border-radius: 10px 10px 10px 10px;
        border: 1px solid #ececec;
        width: 100%;
        height: 100%;
      }
    }
    .piturnInput {
      margin-top: 20px;
      width: 460px;
      height: 80px;
      opacity: 1;
      > textarea {
        padding: 11px 20px;
        border-radius: 10px 10px 10px 10px;
        border: 1px solid #ececec;
        width: 100%;
        height: 80px;
        overflow: auto;
      }
    }
  }
}
.fenleiWidth {
  width: 141px;
}
.fennew {
  position: relative;
}
.fenlei {
  margin-top: 20px;
  .fenleixuanze {
    padding: 0 20px;
    width: 225px;
    height: 46px;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    border: 1px solid #ececec;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #656f79;
    }
  }
  .inputmoxing {
    height: 100%;
    border: none;
  }
  .fenleibox {
    overflow: auto;
    position: absolute;
    top: 62px;
    margin-top: 10px;
    width: 224px;
    height: 300px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    z-index: 999;
    background-color: #fff;
    .fenitem {
      padding: 0 20px;
      width: 100%;
      background-color: #fff;
      height: 46px;
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #000000;
      }
      &:hover {
        background: rgba(100, 200, 220, 0.12);
        > span {
          color: #64c8dc !important;
        }
      }
    }
  }
}
/* 滚动条整体样式 */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #ececec;
  border-radius: 2px;
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f7f9fa;
  height: 80% !important;
}

/* 鼠标悬停时滚动条轨道样式 */
::-webkit-scrollbar-track:hover {
  background-color: #f7f9fa;
}
.moxingclorl {
  background-color: #ecf8fb !important;
  padding: 0 22px;
}
.noshibai {
  display: block;
  margin-top: 20px;
  margin-left: 10px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ff2744;
}
.biaoqing {
  margin-top: 17px;
  width: 460px;
  height: 46px;
  opacity: 1;
  > input {
    padding-left: 20px;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #ececec;
    width: 100%;
    height: 100%;
  }
}
.biaoqingboax {
  flex-wrap: wrap;
  .biaoitem {
    margin-top: 10px;

    margin-right: 10px;
    position: relative;
    // width: 84px;
    padding: 3px 18px;
    height: 26px;

    background: rgba(100, 200, 220, 0.12);
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    > span {
      font-size: 12px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #64c8dc;
    }
    .sc {
      position: absolute;
      top: -8px;
      right: -5px;
    }
  }
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #64c8dc;
  border-color: #64c8dc;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #64c8dc;
}
.biaoshi {
  .biaoshiitem {
    position: relative;
    > input {
      position: absolute;
      left: 143px;
      width: 86px;
      height: 26px;
      background: #f7f9fa;
      border-radius: 6px 6px 6px 6px;
      opacity: 1;
      border: none;
      padding-left: 10px;
      font-size: 12px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #656f79;
    }
    .alert-circle {
      position: absolute;
      left: 237px;
    }
  }
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  border-color: #9ed8e6;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #656f79;
}
input:focus,
textarea:focus {
  outline: none;
}
/* 滚动条整体样式 */
textarea::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

/* 滚动条滑块样式 */
textarea::-webkit-scrollbar-thumb {
  background-color: #ececec;
  border-radius: 2px;
}

/* 滚动条轨道样式 */
textarea::-webkit-scrollbar-track {
  background-color: #f7f9fa;
}

/* 鼠标悬停时滚动条轨道样式 */
textarea::-webkit-scrollbar-track:hover {
  background-color: #f7f9fa;
}
textarea {
  resize: none;
}
/* 滚动条滑块样式 */

input {
  &::placeholder {
    font-size: 14px;
    color: #a8abb2 !important;
  }
}

textarea {
  &::placeholder {
    font-size: 14px !important;
    color: #a8abb2 !important;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }
}
</style>
